<div
 class="panel panel-default deposit-panel"
 ng-show="!recordsVM.invenioRecordsArgs.templateParams.is_published || !recordsVM.invenioRecordsArgs.templateParams.is_local_doi"
 ngf-drag-over-class="'dragover'"
 ngf-drop=""
 ngf-change="filesVM.addFiles($newFiles)"
 ngf-max-size="50GB"
 ngf-allow-dir="false"
 ngf-include-dir="false"
 ngf-max-files="100"
 ngf-multiple="true"
 ngf-drop-available="files.dropSupported"
>
  <div class="panel-heading">
    <div class="row">
      <div class="col-sm-6" ng-click="collapsed = !collapsed">
        <a class="panel-toggle ng-binding">Files&nbsp;&nbsp;&nbsp;
        <span ng-show="collapsed"><i class="glyphicon glyphicon-chevron-right"></i></span>
        <span ng-hide="collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span>
        </a>
      </div>
      <div class="col-sm-offset-2 col-sm-4">
        <span class="pull-right">
          <span class="text-muted" ng-show="filesVM.invenioFilesBusy && filesVM.getCompleted().length < filesVM.files.length">
            <i class="fa fa-spinner"></i>
          </span>
          <button class="btn btn-xs btn-danger" type="submit" ng-show="filesVM.invenioFilesBusy" ng-click="filesVM.cancel()"><i class="fa fa-times icon-white"></i> Cancel</button>
          <button class="btn btn-xs btn-default"
            ngf-max-size="50GB"
            ngf-multiple="true"
            ngf-allow-dir="false"
            ngf-include-dir="false"
            ngf-max-files="100"
            ngf-select=""
            ngf-change="filesVM.addFiles($newFiles)"
          ><i class="fa fa-files-o"></i> Choose files</button>
          <button class="btn btn-xs btn-success" type="submit" ng-disabled="filesVM.invenioFilesBusy || filesVM.getCompleted().length === filesVM.files.length" ng-click="filesVM.upload()">
          <i class="glyphicon glyphicon-upload"></i> Start upload</button>
        </span>
      </div>
    </div>
  </div>

  <table class="table" ng-hide="collapsed || filesVM.files.length == 0">
    <tr>
      <th>Filename
      <small class="text-muted">({{ (filesVM.files | filter:fileSearch).length }} files)</small>
      </th>
      <th>Size</th>
      <th class="text-center">Progress</th>
      <th class="text-center">Delete</th>
    </tr>
    <tr class="sel-file" ng-repeat="f in filesVM.files | filter:fileSearch | orderBy:'key'">
      <td>
        <a ng-show="f.links.self" ng-href="{{f.links.self}}">{{ f.key | limitTo:50 }} <span ng-show="f.key.length > 50">...</span></a>
        <span ng-hide="f.links.self">{{ f.key | limitTo:50 }} <span ng-show="f.key.length > 50">...</span></span>
        <small class="text-muted" ng-show="f.checksum"><br />{{f.checksum}} <i class="fa fa-question-circle" data-placement="top" bs-tooltip data-container="div" data-title="This is the file fingerprint (MD5 checksum), which can be used to verify the file integrity."></i></small>
      </td>
      <td>{{ f.size | fileSizeFormat }}</td>
      <td class="text-center">
        <span ng-show="f.progress < 100 && !f.errored">{{ f.progress }} %</span>
        <span ng-show="f.processing && !f.errored">Processing...</span>
        <span ng-show="f.errored" class="text-danger">Error</span>
        <span ng-show="f.completed" class="text-success"><i class="fa fa-check"></i></span>
      </td>
      <td ng-show="f" class="text-center"><a href="#" ng-click="filesVM.remove(f)"><i class="fa fa-trash-o"></a></td>
    </tr>
    <tr ng-show="(filesVM.files | filter:fileSearch).length == 0">
      <td colspan="4" class="text-center text-muted"> No results.</td>
    </tr>
    <tr class="warning">
      <td colspan="4">
        <small class="text-muted">Note: File addition, removal or modification are not allowed after you have published your upload. This is because a Digital Object Identifier (DOI) is registered with <a target="_blank" rel="noopener noreferrer" href="http://www.datacite.org"><i class="fa fa-external-link"></i> DataCite</a> for each upload.</small>
      </td>
    </tr>
  </table>

  <div class="list-group file-upload" ng-hide="collapsed || filesVM.files.length > 0">
    <div class="list-group-item">
      <div class="jumbotron ng-binding" align="center">
        <h2 ng-show="files.dropSupported">Drag and drop files here</h2>
        <h4 ng-show="files.dropSupported" class="text-muted">&mdash; or &mdash;</h4>
        <h1>
          <button class="btn btn-lg btn-primary"
            ngf-max-size="50GB"
            ngf-multiple="true"
            ngf-allow-dir="false"
            ngf-include-dir="false"
            ngf-max-files="100"
            ngf-select=""
            ngf-change="filesVM.addFiles($newFiles)"
          ><i class="fa fa-upload"></i> Choose files</button>
        </h1>
      </div>

    </div>
  </div>

  <p class="text-center" ng-hide="collapsed">
    <small class="text-muted">
      (minimum 1 file required, max {{ recordsVM.invenioRecordsArgs.templateParams.max_bucket_size | fileSizeFormat }} per dataset - <a target="_blank" rel="noopener noreferrer" href="/support">contact us</a> for larger datasets)
    </small>
  </p>
  <p class="text-center" ng-hide="collapsed">
    <small>
      If you're experiencing issues with uploading larger files, read our <a target="_blank" rel="noopener noreferrer" href="https://help.zenodo.org/">FAQ section</a> on file upload issues.</small>
  </p>
</div>
<div
 class="panel panel-default deposit-panel"
 ng-show="recordsVM.invenioRecordsArgs.templateParams.is_published && recordsVM.invenioRecordsArgs.templateParams.is_local_doi"
>
  <div class="panel-heading">
    <div class="row">
      <div class="col-sm-12" ng-click="collapsed = !collapsed">
        <a class="panel-toggle ng-binding">Files&nbsp;&nbsp;&nbsp;
        <span class="pull-right" ng-show="collapsed"><i class="glyphicon glyphicon-chevron-right"></i></span>
        <span class="pull-right" ng-hide="collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span>
        </a>
      </div>
    </div>
  </div>

  <table class="table" ng-hide="collapsed || filesVM.files.length == 0">
    <tr>
      <th width="70%">Filename
      <small class="text-muted">({{ (filesVM.files | filter:fileSearch).length }} files)</small>
      </th>
      <th width="20%">Size</th>
      <th>Checksum <i class="fa fa-question-circle text-muted" bs-tooltip data-container="div" data-placement="top" data-title="This is the file fingerprint (MD5 checksum), which can be used to verify the file integrity."></i></th>
    </tr>
    <tr class="sel-file" ng-repeat="f in filesVM.files | filter:fileSearch | orderBy:'key'">
      <td>
        <a ng-show="f.links.self" ng-href="{{f.links.self}}">{{ f.key | limitTo:50 }} <span ng-show="f.key.length > 50">...</span></a>
        <span ng-hide="f.links.self">{{ f.key | limitTo:50 }} <span ng-show="f.key.length > 50">...</span></span>
      </td>
      <td>{{ f.size | fileSizeFormat }}</td>
      <td><small class="text-muted">{{ f.checksum }}</small></td>
    </tr>
    <tr ng-show="(filesVM.files | filter:fileSearch).length == 0">
      <td colspan="4" class="text-center text-muted"> No results.</td>
    </tr>
    <tr class="warning">
      <td colspan="3">
        <small class="text-muted">Note: File addition, removal or modification are not allowed after an upload has been published. This is because a Digital Object Identifier (DOI) is registered with <a href="http://www.datacite.org"><i class="fa fa-external-link"></i> DataCite</a> for each upload. If you've made a mistake please <a href="/contact">contact us</a>.</small>
      </td>
    </tr>
    <tr class="ng-hide" ng-show="{{recordsVM.invenioRecordsArgs.templateParams.is_local_doi}}">
      <td colspan="3">
        <!-- "Upgrade to versioned record" button -->
        <div align="center" class="ng-hide" ng-show="{{!recordsVM.invenioRecordsArgs.templateParams.has_conceptdoi}}">
          <p>You can upgrade this record to a versioned record. You will be able to create a new
            record version, with new files an a completely new DOI.</p>
          <button
            class="btn btn-success"
            ng-show="recordsVM.invenioRecordsArgs.templateParams.is_published"
            data-template-url="{{recordsVM.invenioRecordsArgs.templateParams.upgradeversioningmodal_template}}"
            bs-modal>Upgrade to versioned record</button>
        </div>
        <!-- "New version" button -->
        <div align="center" class="ng-hide" ng-show="{{recordsVM.invenioRecordsArgs.templateParams.has_conceptdoi}}">
          <p>If you have an updated version of your files, you can create a new
            record version, with a completely new DOI.</p>
          <div
            class="tooltip-wrapper"
            data-container="div"
            data-title="{{recordsVM.invenioRecordsArgs.templateParams.has_versioning_permissions ? undefined : 'Only the owner of the latest version of this record can create new versions.'}}"
            bs-tooltip
          >
            <button
              class="btn btn-success"
              ng-disabled="!recordsVM.invenioRecordsArgs.templateParams.has_versioning_permissions"
              ng-show="recordsVM.invenioRecordsArgs.templateParams.is_published"
              data-template-url="{{recordsVM.invenioRecordsArgs.templateParams.newversionmodal_template}}"
              bs-modal>New version</button>
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
